<!-- PSA Setting -->
<!-- Author: Edwin -->
<template>
  <el-dialog :visible.sync="dialogStatus"
             width="500px"
             :close-on-click-modal="false"
             append-to-body>
    <template v-if="!isHasPsa">
      <div style="position:absolute;top:0;left:0;width:100%;height:100%;background:#ededed;opacity:0.8;z-index:2050;"></div>
      <div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:2051;display:flex;flex-direction:column;justify-content:center;align-items:center;">
        <el-button size="mini"
                   @click="toGetStartedPage"
                   type="primary">{{ $t('custom.bots.psa.toGetStartedBtn') }}</el-button>
      </div>
    </template>
    <div slot="title"
         style="fontWeight: bold;fontSize: 1.2em;">{{ $t('custom.bots.psa.title') }}</div>
    <el-form label-width="120px"
             v-loading="loadingForGetInfo">
      <el-form-item :label="$t('custom.bots.psa.labelPSA')"
                    label-width='130px'>
        <el-select v-model="selectedPSA"
                   :disabled="true"
                   :placeholder="$t('custom.bots.psa.noData')"
                   style="width:100%;">
          <el-option v-for="item in comPSAList"
                     :key="item.dictValue"
                     :label="item.dictLabel"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.bots.psa.labelStatus')"
                    label-width='130px'>
        <el-select v-model="PSAInfo.value"
                   multiple
                   collapse-tags
                   clearable
                   v-loading="loadingForStatus"
                   :placeholder="$t('custom.bots.psa.noData')"
                   style="width:100%;">
          <el-option v-for="(item,index) in statusList"
                     :key="index"
                     :label="item"
                     :value="item">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button size="mini"
                 :loading="loadingForSaveBtn"
                 type="primary"
                 @click="savePSAInfo">{{ $t('custom.bots.psa.save') }}</el-button>
      <el-button size="mini"
                 @click="closeDialog">{{ $t('custom.bots.psa.cancel') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { fetchTicketStatus, fetchSoftwareSetting, updateSoftwareSetting } from '@/api/new'
export default {
  data () {
    return {
      dialogStatus: false,
      isHasPsa: true,
      loadingForGetInfo: false,
      loadingForStatus: false,
      loadingForSaveBtn: false,
      selectedPSA: null,
      // ticketStatus: null,
      botsSettingList: null,
      PSAInfo: {
        softwareName: 'selectedPSA',
        key: 'ticketStatus',
        value: []
      },
      PSAInfoId: null,
      statusList: []
    }
  },
  watch: {
    dialogStatus (val) {
      if (val) {
        // get info
        this.getPSAInfo()
      } else {
        Object.assign(this.$data, this.$options.data())
      }
    }
  },
  computed: {
    comPSAList () {
      return window.SITE_CONFIG['dictList'].find(e => e.dictType === 'get_started_about_psa').dataList
    }
  },
  methods: {

    savePSAInfo () {
      this.loadingForSaveBtn = true
      let temp = { ...this.PSAInfo }
      temp = JSON.parse(JSON.stringify(temp))
      temp.value = temp.value.join(',')
      this.PSAInfoId && (temp.id = this.PSAInfoId)
      const params = [
        temp
      ]
      updateSoftwareSetting(params)
        .then(({ data: res }) => {
          this.loadingForSaveBtn = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          this.closeDialog()
        })
        .catch(() => {
          this.loadingForSaveBtn = false
          this.closeDialog()
        })
    },
    getPSAInfo () {
      this.loadingForGetInfo = true
      fetchSoftwareSetting()
        .then(({ data: res }) => {
          this.loadingForGetInfo = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          try {
            if (res.data.software.selectedPSA[0]) {
              this.selectedPSA = res.data.software.selectedPSA[0]
              let subjectCode = this.findSubjectCode(this.selectedPSA) ? this.findSubjectCode(this.selectedPSA) : ''
              this.getPSAStatusList(subjectCode, res.data)
            }
          } catch (error) {
            this.isHasPsa = false
          }
        })
        .catch(() => { this.loadingForGetInfo = false })
    },
    openDialog () {
      this.dialogStatus = true
    },
    closeDialog () {
      this.dialogStatus = false
    },
    toGetStartedPage () {
      this.$store.state.GetStarted.dialogStatus = false
      setTimeout(() => {
        this.closeDialog()
        this.$store.state.GetStarted.dialogStatus = true
      }, 0)
    },
    getPSAStatusList (data, DataItem) {
      this.loadingForStatus = true
      if (!data) {
        return
      }
      const params = {
        subjectCode: data
      }
      fetchTicketStatus(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.statusList = res.data
        try {
          if (DataItem.softwareSetting.selectedPSA) {
            let last = DataItem.softwareSetting.selectedPSA.find(e => e.key === 'ticketStatus')

            this.PSAInfo.value = last.value.split(',')

            this.PSAInfoId = last.id
          }
        } catch (error) { }
        this.loadingForStatus = false
      })
    },
    findSubjectCode (data) {
      let psaList = this._.filter(window.SITE_CONFIG['dictList'].find(e => e.dictType === 'integration_list').dataList, { dictLabel: 'name' })
      return this._.filter(psaList, { dictValue: data })[0].subjectCode
    }
  }
}
</script>

<style scoped>
</style>
